<!-- eslint-disable vue/valid-attribute-name -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
  <!-- v-loading="loading" -->
  <!-- :element-loading-background="loadingBgc" -->
  <div id="cusTable" :style="`height: ${height};min-height: ${minHeight};`">
    <div v-if="showBtn" class="tableRTBtn">
      <el-button text @click="hReset">
        <el-icon><RefreshRight /></el-icon>
        <span>刷新表格</span>
      </el-button>
      <el-popover popper-style="padding: 20px;" trigger="click">
        <template #reference>
          <el-button text>
            <svg-icon icon-name="height" />
            <span>自动高度</span>
          </el-button>
        </template>
        <template #default>
          <el-radio-group v-model="rowHeight" style="width: 55px">
            <el-radio v-for="item in rowHeights" :key="item.value" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </template>
      </el-popover>
      <el-popover popper-style="padding: 20px;" trigger="click">
        <template #reference>
          <el-button text>
            <el-icon><Setting /></el-icon>
            <span>设置表单</span>
          </el-button>
        </template>
        <template #default>
          <ul>
            <li v-for="item in newColumns" :key="item.prop">
              <el-checkbox v-model="item.isShow" :label="item.label" />
            </li>
          </ul>
        </template>
      </el-popover>
    </div>
    <el-table
      v-bind="$attrs"
      ref="elTableRef"
      :data="data"
      :border="showBorder"
      stripe
      :span-method="spanMethod"
      :header-cell-style="headerCellStyle"
      :show-overflow-tooltip="showTooltip"
      :highlight-current-row="highlightCurrentRow"
      :class="{ lightStripe: lightStripe }"
      :row-style="{ height: rowHeight + 'px !important' }"
      @select="select"
      @select-all="selectAll"
      @current-change="selectCurrentChange"
    >
      <el-table-column v-if="showSelection" type="selection" width="70"></el-table-column>
      <el-table-column
        v-if="showOrder"
        type="index"
        label="序号"
        align="center"
        :width="renderColumns.length ? 80 : aotuWidth"
      ></el-table-column>
      <RecursionItem :column-list="renderColumns">
        <template v-for="slot in slotLists" :key="slot" #[slot]="scoped">
          <slot :name="slot" v-bind="scoped"></slot>
        </template>
      </RecursionItem>
      <el-table-column
        v-if="showOperate"
        :fixed="operateFixed"
        label="操作"
        align="center"
        :width="operateWidth"
      >
        <template #default="{ row }">
          <slot name="handle" :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-pagination
    v-if="showPagination"
    :current-page="query.pageNum"
    :page-size="query.pageSize || pageSizes[1]"
    :page-sizes="pageSizes"
    small="small"
    background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    style="justify-content: end"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { computed, ref, onBeforeMount, reactive, watch, useAttrs, getCurrentInstance } from 'vue'
import { RefreshRight, Setting } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import RecursionItem from './RecursionItem.vue'
const _this = getCurrentInstance()
const props = defineProps({
  showBtn: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: []
  },
  data: {
    type: Array,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: () => ({})
  },
  rowKey: {
    type: String,
    default: 'id'
  },
  showOperate: {
    type: Boolean,
    default: true
  },
  showSelection: {
    type: Boolean,
    default: true
  },
  showOrder: {
    type: Boolean,
    default: true
  },
  showTooltip: {
    type: Boolean,
    default: false
  },
  showBorder: {
    type: Boolean,
    default: true
  },
  selectionWidth: {
    type: Number || String,
    default: 80
  },
  lightStripe: {
    type: Boolean,
    default: false
  },
  showPagination: {
    type: Boolean,
    default: true
  },
  showRefresh: {
    type: Boolean,
    default: true
  },
  showSetting: {
    type: Boolean,
    default: true
  },
  showSizeChange: {
    type: Boolean,
    default: true
  },
  pageSizes: {
    type: Array,
    default: () => [5, 10, 20, 50]
  },
  // eslint-disable-next-line vue/require-default-prop
  getApi: {
    type: Function
  },
  total: {
    type: Number,
    default: 0
  },
  highlightCurrentRow: {
    type: Boolean,
    default: false
  },
  loadingBgc: {
    type: String,
    default: 'rgba(0, 0, 0, 0.8)'
  },
  loading: {
    type: Boolean,
    default: false
  },
  operateFixed: {
    type: Boolean || String,
    default: false
  },
  operateWidth: {
    type: String,
    default: 'auto'
  },
  query: {
    type: Object,
    default: () => ({
      pageSize: 10,
      pageNum: 1
    })
  },
  spanMethod: {
    type: Function,
    default: () => {}
  },
  height: {
    type: String,
    default: '100%'
  },
  minHeight: {
    type: String,
    default: 'auto'
  },
  headerCellStyle: {
    type: Function,
    default: () => {}
  }
})
const $attrs = useAttrs()
const elTableRef = ref(null)
const emit = defineEmits([
  'hSizeChange',
  'hCurrentChange',
  'hRefresh',
  'selectCurrentChange',
  'select',
  'selectAll'
])
const newColumns = ref([])
const selectedRows = ref([])
const getListOption = ref({
  currentPage: 1,
  pageSize: 10
})

const rowHeights = [
  { label: '较低', value: 40 },
  { label: '中等', value: 48 },
  { label: '较高', value: 64 }
]
const rowHeight = ref(40)
const width = computed(() => {
  return 100 / (props.columns.length + 3) + '%'
})
const getNewColumns = () => {
  newColumns.value = props.columns.map((item) => ({
    ...item,
    isShow: true
  }))
}
const renderColumns = computed(() => {
  return newColumns.value.filter((item) => item.isShow)
})
const handleSelectionChange = (selectedRows) => {
  selectedRows.value = selectedRows
}
const slotLists = computed(() => {
  return Object.keys(_this.slots || {}) || []
})
// 选中状态
const select = (selection, row) => {
  emit('select', selection, row)
}
const selectAll = (selection) => {
  emit('selectAll', selection)
}
// 单选选中
const selectCurrentChange = (currentRow, oldCurrentRow) => {
  emit('selectCurrentChange', currentRow)
}
// 改变每页条数
const handleSizeChange = (e) => {
  getListOption.value.pageSize = e
  emit('hSizeChange', e)
}
// 改变当前页
const handleCurrentChange = (e) => {
  getListOption.value.currentPage = e
  emit('hCurrentChange', e)
}
// 刷新页面
const hReset = () => {
  emit('hRefresh')
  ElMessage.success('表格刷新成功')
}

onBeforeMount(() => {
  getNewColumns()
})
defineExpose({
  elTableRef
})
</script>

<style scoped lang="scss">
#cusTable {
  // margin-top: 1.56rem;
  position: relative;
  // min-height: 550px;
  // max-height: 600px;
  box-sizing: border-box;
  z-index: 0;
}

:deep(.el-table) {
  // margin-top: 1.56rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  thead .el-table-fixed-column--right {
    background: #f2f2f2 !important;
  }
  .cell {
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
  }
  .el-table__cell {
    padding: 0;
  }
}
/* 可以根据需要添加样式 */
.tableRTBtn {
  position: absolute;
  right: 5px;
  top: -50px;
}
.el-table__inner-wrapper {
  z-index: 0;
}

.el-pagination {
  width: 100%;
  position: fixed;
  right: 35px;
  bottom: 30px;
  z-index: 9;
}
</style>
